<template>
  <div id="main2" style="width: 100%; height: 100%;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'Echart2',
    mounted() {
      // this.getSystemInfo();
    },
    methods: {
      getSystemInfo() {
        const that = this;
        this.$axios({
          method: 'get',
          url: `/api/message/get-by-type`,
        }).then((res) => {
          if (res.data.code == 0) {
            const array = []
            res.data.data.forEach((item) => {
              array.push({ value: item.num, name: item.algorithm })
            })
            that.initChart(array);
          }
        }).catch((error) => {
        });
      },
      initChart(data) {
        const chartDom = document.getElementById('main2');
        const myChart = echarts.init(chartDom);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          legend: {
            right: '5%',  // 改为右侧
            top: 'center', // 垂直居中
            orient: 'vertical', // 垂直排列
            textStyle: {
              color: '#fff' // 文字颜色设为白色
            }
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false
                },
              },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        };

        option && myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function () {
          myChart.resize();
        });
      }
    }
  }
</script>
